<template>
  <div class="app-container">
    <div id="data">
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>Bug 趋势图</strong>
      <div id="main" style="width: 100%; height: 380px" />

      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value2"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>迭代版本 趋势图</strong>
      <div id="main2" style="width: 100%; height: 380px" />
    </div>
  </div>
</template>

<script>
import * as projectData from "@/api/projectData";

export default {
  data() {
    return {
      value1: null,
      value2: null,
    };
  },

  methods: {},
  created() {
    window.location.href.split("id=");
  },
  async mounted() {
    let id = window.location.href.split("id=")[1];
    let subsystemBugPlot = await projectData.subsystemBugPlot(id);
    let subsystemIterationPlot = await projectData.subsystemIterationPlot(id);

    let names = [];
    let bugAdds = [],
      bugCloses = [];
    for (let v of subsystemBugPlot.data.system_version_extension) {
      names.push(v.mouth);
      bugAdds.push(v.Bug_trend_histogram_add_num);
      bugCloses.push(v.Bug_trend_line_closed_num);
    }

    let names2 = [];
    let iterationAdds = [],
      iterationCloses = [];
    for (let v of subsystemIterationPlot.data.subsystem_version_extension) {
      names2.push(v.mouth);
      iterationAdds.push(v.Bug_trend_histogram_add_num);
      iterationCloses.push(v.Bug_trend_line_closed_num);
    }

    console.log(names, bugAdds, bugCloses);
    var myChart = this.echarts.init(document.getElementById("main"));
    var myChart2 = this.echarts.init(document.getElementById("main2"));
    //准备配置项
    var option = {
      tooltip: {
        trigger: "axis",
        formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}",
      },
      legend: {
        data: ["新增", "关闭"],
      },
      xAxis: {
        data: names,
      },
      yAxis: [
        {
          type: "value",
          name: "新增",
          show: true,
          interval: 50,
          axisLine: {
            lineStyle: {
              color: "#5e859e",
              width: 2,
            },
          },
        },
        {
          type: "value",
          name: "关闭",
          min: 0,
          max: 100,
          interval: 50,
          axisLabel: {
            formatter: "{value} %",
          },
          axisLine: {
            lineStyle: {
              color: "#5e859e", //纵坐标轴和字体颜色
              width: 2,
            },
          },
        },
      ],
      series: [
        {
          name: "新增",
          type: "bar",
          barWidth: "50%",
          data: bugAdds,
        },
        {
          name: "关闭",
          type: "line",
          smooth: true,
          data: bugCloses,
        },
      ],
    };

    // 将配置项设置给echarts实例对象
    myChart.setOption(option);
    option.xAxis.data = names2;
    option.series[0].data = iterationAdds;
    option.series[1].data = iterationCloses;

    myChart2.setOption(option);
  },
};
</script>

<style scoped>
#data {
  margin: 50px 20px;
}
</style>
